<!-- extend base layout -->
{% extends "base.html" %} {% block content %}
<br />
<script>
  //   img = random_img();
  //   console.log("img:", img);
  //   let randomURL = "https://source.unsplash.com/200x250/?encryption";
  let randomURL = "https://source.unsplash.com/150x150/?cat";

  axios.get(randomURL).then((data) => {
    // the url of the random img
    console.log(data.request.responseURL);
    img_src = data.request.responseURL;
    document.querySelector(".img").setAttribute("src", img_src);
    document.querySelector("#r_img").setAttribute("value", img_src);
  });
</script>

<!-- <center> -->
<div class="form">
  <form action="/submit" id="textform" method="post">
    <div class="left">
      <img
        class="img"
        src="https://dummyimage.com/150x150&text=This%20is%20a%20lovly%20cat"
      />
    </div>
    <div class="right">
      <textarea
        name="content"
        rows="8"
        cols="30"
        placeholder="Just write whatever you want to..."
      >
this is a lovely cat~</textarea
      >

      <div class="down">
        <input
          type="text"
          name="author"
          placeholder="Your name"
          value="hejing"
        />
        <input type="hidden" name="img" id="r_img" />
        <input type="submit" value="Post" />
      </div>
    </div>
  </form>
</div>

<!-- </center> -->

<div class="btns">
  <a href="{{node_address}}/mine" target="_blank"><button>Mine</button></a>
  <a href="/"><button>Resync</button></a>
</div>
<br />

<div class="posts">
  {% for post in posts %}
  <div class="post_box">
    <div class="post_box-header">
      <!-- <div class="post_box-options">
        <button class="option-btn">Reply</button>
      </div> -->
      <div
        class="post_box-avatar"
        style="
          background: rgb(0, 97, 146) none repeat scroll 0% 0%;
          box-shadow: rgb(0, 97, 146) 0px 0px 0px 2px;
        "
      >
        {{post.author[0]}}
      </div>
      <div class="name-header">{{post.author}}</div>
      <div class="post_box-subtitle">
        Posted at <i>{{readable_time(post.timestamp)}}</i>
      </div>
    </div>
    <div>
      <div class="post_box-body">
        <p>{{post.content}}</p>
        <img src="{{post.img}}" />
      </div>
    </div>
  </div>
  {% endfor %}

  <i></i>
  <i></i>
  <i></i>
</div>

<style>
  .btns {
    display: flex;
    justify-content: space-evenly;
    margin: 10px;
  }
  .posts {
    width: 800px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
  }

  .posts > i {
    width: 160px;
    padding: 12px 0px 0px 12px;
    margin-top: 0px;
    margin-bottom: 8px;
    margin-right: 5px;
  }
  .post_box {
    width: 160px;
    background: #fff;
    padding: 12px 0px 0px 12px;
    margin-top: 0px;
    margin-bottom: 8px;
    margin-right: 5px;
    border-top: 1px solid #f0f0f0;
  }

  .post_box-header {
    padding-bottom: 12px;
  }

  .post_box-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 22px;
    float: left;
    margin-right: 16px;
    border: 1px solid #fff;
    box-shadow: 0px 0px 0px 2px #f00;
  }

  .post_box-avatar::after {
    content: "";
    display: block;
  }

  .post_box-name {
    font-weight: bold;
  }

  .post_box-subtitle {
    color: #777;
  }

  .post_box-body {
    margin-top: 16px;
    margin-bottom: 8px;
  }

  .post_box-options {
    float: right;
  }
  .option-btn {
    background: #f8f8f8;
    border: none;
    color: #2c3e50;
    padding: 7px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 2px;
    margin-right: 2px;
    outline: none;
    height: 42px;
  }
</style>
{% endblock %}
